<template>
	<view class="tdwrapper">
		<view class="today_prize" style="background-image: url('https://lottery.yywlcm.com/upload/h5/home/6.png')">
			<view class="left">
				<text class="fw f28">今日奖品</text>
				<text class="f24 c_000">每晚零点准时上新</text>
				<text class="f24 c_868686">下一场 {{item.last_time|time}} 开始</text>
			</view>
			<view class="right">
				<label class="to_first_page" @click="jumpPage">上首页</label>
				<text class="c_868686 f24">本场结束剩余</text>
				<view class="time">
					<text class="number">{{hours|supplement}}</text>
					<text class="">:</text>
					<text class="number">{{minutes|supplement}}</text>
					<text>:</text>
					<text class="number">{{seconds|supplement}}</text>
				</view>

			</view>
		</view>
		<view class="t_goods flex flexwrap mt20">
			<view v-for="(item, index) in 4" class="good_item mb20" :class="{'mr20': index%2==0}">
				<view class="pricebox c_fff f24">
					¥2333
				</view>
				<view class="goodimg goodbox">
					<image class="goodimg"
						src="https://img.alicdn.com/imgextra/i3/442510028/O1CN01PSswUC1C4rwhLGfWV_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"
						mode=""></image>
				</view>
				<view class="textcenter otw p10 pt20 f24 c_000">
					水星家纺
				</view>
				<view class="textcenter otw c_868686 f22 pb15 pr10 pl10">
					水星家纺全棉犀利
				</view>
				<view class="bg_linear c_fff f26 flexcenter drawbox">
					参与抽奖
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["item"],
		data() {
			return {
				lastTime: "",
				hours: "00",
				minutes: "00",
				seconds: "00"
			}
		},

		methods: {
			jumpPage() {
				uni.navigateTo({
					url: '/packages/previousHomePage/index',
				});
			},

			countdown() {
				var date1 = this.item.end_time;
				var date2 = this.item.start_time;
				var time = Math.abs(new Date(date1).getTime() - new Date(date2).getTime()); // 获取结束时间的毫秒数
				var _this = this;
				var diff = time;
				var intervalId = setInterval(function() {

					diff = diff - 1000; // 计算剩余时间的毫秒数差值

					var days = Math.floor(diff / (24 * 60 * 60 * 1000)); // 计算剩余天数
					_this.hours = Math.floor((diff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); // 计算剩余小时数
					_this.minutes = Math.floor((diff % (60 * 60 * 1000)) / (60 * 1000)); // 计算剩余分钟数
					_this.seconds = Math.floor((diff % (60 * 1000)) / 1000); // 计算剩余秒数



					if (diff < 0) {
						clearInterval(intervalId); // 倒计时结束，清除定时器
					}
				}, 1000); // 每秒钟执行一次
			}
		},
		mounted() {
			console.log("今日抽奖")
			console.log(this.item);
			this.countdown()

		},
		computed: {

		},
		filters: {
			time(val) {
				var arr = val.split(" ");
				return arr[1].substring(0, 5)
			},
			supplement(val) {
				return Number(val) < 10 ? ("0" + val) : val

			}
		}

	}
</script>

<style lang="scss">
	.tdwrapper {
		padding: 10rpx 20rpx;
	}

	.today_prize {
		height: 184rpx;
		position: relative;
		background-size: 100% 100%;
		padding: 30rpx;
		display: flex;

		.left {
			display: flex;
			flex-direction: column;
		}

		.right {
			display: flex;
			flex: 1;
			align-items: flex-end;
			flex-direction: column;
			text-align: right;

			.time {
				display: flex;

				text {
					color: #000;
					height: 38rpx;
					line-height: 38rpx;
					margin-right: 4rpx;

					&.number {
						width: 48rpx;
						text-align: center;
						background: #000;
						color: #fff;
						font-size: 26rpx;
					}


				}
			}
		}

		text {
			display: block;
			line-height: 60rpx;
		}

		.to_first_page {
			background: linear-gradient(180deg, #148DFF 0%, #6CC3FF 100%);
			border-radius: 30rpx;
			color: #fff;
			padding: 0;
			line-height: 46rpx;
			margin: 8rpx 0;
			font-size: 28rpx;
			width: 131rpx;
			height: 46rpx;
			text-align: center;
		}
	}

	.good_item {
		width: 342rpx;
		height: 428rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;

		.pricebox {
			position: absolute;
			top: 16rpx;
			right: 2rpx;
			height: 40rpx;
			line-height: 40rpx;
			width: 124rpx;
			background: url('https://lottery.yywlcm.com/upload/h5/home/7.png') center center no-repeat;
			background-size: cover;
			padding-left: 18rpx;
		}

		.goodimg {
			width: 100%;
			height: 260rpx;
		}

		.drawbox {
			width: 200rpx;
			border-radius: 44rpx;
			height: 52rpx;
			line-height: 52rpx;
			margin: 0 auto;
		}
	}
</style>